<template>
  <view class="container">
    <!-- 内容主体区域 -->
    <view class="main-content">
      <view class="title-section">
        <text class="badge-dot"></text>
        <text class="badge-dot orange"></text>
        <text class="badge-dot green"></text>
        <text class="badge-dot cyan"></text>
        <text class="badge-dot blue"></text>
        <text class="badge-dot black"></text>
        <text class="badge-dot gray"></text>
        <view class="field-title">
          <text>已发布任务</text>
        </view>
      </view>

      <!-- 搜索框 -->
      <form @submit="onSubmit">
        <view class="form-item">
          <view class="input-inline">
            <label>学校</label>
            <picker v-model="selectedSchoolIndex" :range="schoolOptions" @change="handleSchoolChange" style="margin-left: 32px;">
              <view class="picker">
                <text>{{ schoolOptions[selectedSchoolIndex] }}</text>
              </view>
            </picker>
          </view>
          <view class="input-inline">
            <label>价格范围</label>
            <input v-model="priceMin" placeholder="￥" />
            <text>-</text>
            <input v-model="priceMax" placeholder="￥" />
          </view>
          <view class="input-inline">
            <label>任务状态</label>
            <picker v-model="states" :range="stateOptions" mode="selector" @change="handleStateChange">
              <view class="picker">
                <text>{{ stateOptions[states] }}</text>
              </view>
            </picker>
          </view>
          <view class="input-inline">
            <label>关键词</label>
            <input v-model="keywords" placeholder="请输入关键词" style="margin-left: 16px;"/>
          </view>
        </view>
        <view class="search-button">
          <button type="primary" form-type="submit">搜索</button>
        </view>
      </form>

      <!-- 时间、价格排序按钮 -->
      <view class="sort-section">
        <view class="field-title">
          <text>任务</text>
        </view>
        <view class="sort-buttons">
          <text @click="sortByTime">时间最新</text>
          <text @click="sortByPriceAsc"><text class="iconfont icon-up"></text>价格升序</text>
          <text @click="sortByPriceDesc"><text class="iconfont icon-down"></text>价格降序</text>
        </view>
        <view class="task-container">
            <!-- 任务状态标签 -->
            <view class="task-status-tags">
              <text class="tag" :class="getStatusClass('待解决')">待解决</text>
              <text class="tag" :class="getStatusClass('已关闭')">已关闭</text>
              <text class="tag" :class="getStatusClass('解决中')">解决中</text>
              <text class="tag" :class="getStatusClass('已完成')">已完成</text>
              <text class="tag" :class="getStatusClass('南昌大学')">南昌大学</text>
            </view>
        
            <!-- 任务标题 -->
            <view class="task-title">
              <text class="title-text">清理杂草任务</text>
            </view>
        
            <!-- 任务元信息 -->
            <view class="task-meta-info">
              <text class="meta-text">详细描述</text>
              <text class="meta-text">发布时间：2024-12-18 08:52:52</text>
              <text class="meta-text">结束时间：2024-12-18 17:48:28</text>
              <text class="meta-text">奖励：5</text>
            </view>
        
            <!-- 任务描述 -->
            <view class="task-description">
              <text class="description-text">清理校园北门杂草任务</text>
            </view>
        
            <!-- 操作按钮 -->
            <view class="task-actions">
              <button class="btn" @click="cancelTask">取消该任务</button>
              <button class="btn disabled">任务已关闭</button>
              <button class="btn" @click="viewReceiverInfo">查看接受者信息</button>
              <button class="btn" @click="confirmTaskCompletion">确认任务完成</button>
            </view>
          </view>
      </view>

      <!-- 分页条 -->
      <view class="pagination" v-if="totalPages > 1">
        <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        <text>{{ currentPage }}/{{ totalPages }}</text>
        <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
      </view>
    </view>

    <!-- 底部区域 -->
    <view class="footer">
      <text>© - 联系校事达官方客服：6666666</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 侧边栏菜单显示状态（原代码此处无用，可删除相关逻辑，这里保留变量声明但未使用）
const showMenu = ref({
  task: false,
  profile: false,
  chat: false,
  friends: false
});

// 搜索框数据
const school = ref('');
const priceMin = ref('');
const priceMax = ref('');
const stateOptions = ['请选择', '待解决', '已关闭', '解决中', '已完成'];
const states = ref(0);
const keywords = ref('');
const schoolOptions = ['请选择', '中南大学', '湖南大学', '长沙大学'];
const selectedSchoolIndex = ref(0);

// 分页相关数据
const currentPage = ref(1);
const totalPages = ref(5);

// 提交搜索表单
const onSubmit = (e) => {
  e.preventDefault();
  // 处理搜索逻辑
};

// 时间排序
const sortByTime = () => {
  // 处理时间排序逻辑
};

// 价格升序排序
const sortByPriceAsc = () => {
  // 处理价格升序排序逻辑
};

// 价格降序排序
const sortByPriceDesc = () => {
  // 处理价格降序排序逻辑
};

// 获取用户信息（原代码此处无用，可删除相关逻辑，这里保留函数声明但未使用）
const getPuser = (stuid) => {
  uni.navigateTo({
    url: '/pages/userInfo/userInfo'
  });
};

// 获取任务信息（原代码此处无用，可删除相关逻辑，这里保留函数声明但未使用）
const getTask = (tidstr) => {
  uni.navigateTo({
    url: '/pages/taskInfo/taskInfo'
  });
};

// 选择学校
const handleSchoolChange = (e) => {
  selectedSchoolIndex.value = e.detail.value;
  school.value = schoolOptions[selectedSchoolIndex.value];
  console.log('选择的学校:', school.value);
};

// 切换分页
const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    // 处理分页逻辑，如请求对应页的数据
  }
};

// 处理任务状态选择变化
const handleStateChange = (e) => {
  states.value = e.detail.value;
  console.log('任务状态已更改:', stateOptions[states.value]);
};

// 取消任务操作
const cancelTask = () => {
  console.log('执行取消任务操作');
};
// 查看接受者信息操作
const viewReceiverInfo = () => {
  console.log('执行查看接受者信息操作');
};
// 确认任务完成操作
const confirmTaskCompletion = () => {
  console.log('执行确认任务完成操作');
};

// 根据任务状态返回对应的类名
const getStatusClass = (status) => {
  switch (status) {
    case '待解决':
      return 'tag-pending';
    case '已关闭':
      return 'tag-closed';
    case '解决中':
      return 'tag-in-progress';
    case '已完成':
      return 'tag-completed';
    case '南昌大学':
      return 'tag-school';
    default:
      return '';
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 内容主体样式 */
.main-content {
  flex: 1;
  padding: 20px;
}

.title-section {
  margin-bottom: 20px;
}

.badge-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.badge-dot.orange {
  background-color: orange;
}

.badge-dot.green {
  background-color: green;
}

.badge-dot.cyan {
  background-color: cyan;
}

.badge-dot.blue {
  background-color: blue;
}

.badge-dot.black {
  background-color: black;
}

.badge-dot.gray {
  background-color: gray;
}

.field-title {
  margin-top: 10px;
  font-weight: bold;
}

.form-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.input-inline {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.input-inline label {
  margin-right: 10px;
}

.input-inline input {
  width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.picker {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.school-input {
  /* 这里可以删除，因为已经不使用自定义的下拉框了 */
}

.dropdown {
  /* 这里可以删除，因为已经不使用自定义的下拉框了 */
}

.dropdown-item {
  /* 这里可以删除，因为已经不使用自定义的下拉框了 */
}

.search-button {
  text-align: center;
  margin-top: 10px;
}

.sort-section {
  margin-top: 20px;
}

.sort-buttons {
  display: flex;
  margin-bottom: 10px;
}

.sort-buttons text {
  margin-right: 20px;
  cursor: pointer;
}

.task-container {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 15px;
}

.task-status-tags {
  display: flex;
  margin-bottom: 10px;
}

.tag {
  padding: 5px 10px;
  border-radius: 3px;
  color: white;
  margin-right: 5px;
  font-size: 14px;
}

.tag-pending {
  background-color: #409eff;
}

.tag-closed {
  background-color: #ccc;
}

.tag-in-progress {
  background-color: #67c23a;
}

.tag-completed {
  background-color: #f5a623;
}

.tag-school {
  background-color: #f5222d;
}

.task-title {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.title-text {
  font-size: 18px;
}

.task-meta-info {
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
}

.meta-text {
  margin-right: 10px;
}

.task-description {
  margin-bottom: 10px;
}

.description-text {
  font-size: 16px;
}

.task-actions {
  display: flex;
}

.btn {
  padding: 6px 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
  font-size: 14px;
}

.disabled {
  cursor: not-allowed;
  background-color: #f0f0f0;
  color: #999;
}

.pagination {
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button {
  padding: 5px 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 10px;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination text {
  margin: 0 10px;
  color: #333;
  font-size: 16px;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
}
</style>